<template>
	<view class="BusinessDetails" v-show="info.title != '' ? true : false">
		<SRV-topbar :title="info.title"  isLeft='true'></SRV-topbar>
		<view class="info">
			<image :src="info.picture"></image>
			<view class="right">
				<view class="right_txt">
					<text class="oneline" style="font-weight: bold;">{{ info.title }}</text>
				</view>
				<uni-rate disabled="true" :value="info.desc_credit" size="12"></uni-rate>
				<text class="info_title">{{info.cate}}</text>
				<view class="info_title info_or">
					<view v-if="info.business != ''" class="time"> 营业时间 {{info.business}} </view>
					<view v-if="info.distance != 0 " class="km"> 距离 {{info.distance}}千米 </view>
				</view>
			</view>
		</view>
		<view class="info-desc">
			{{info.desc}}
		</view>
		<!-- <view class="info_line">
			<view class="left">
				<image src="https://hdsq.aoorange.cn/attachment/xcx/icon/businessDetails_icon.png" mode="widthFix"></image>
				<text>营业时间：{{info.business}}</text>
			</view>
		</view> -->
		<view class="info_line" @click="showMap()">
			<view class="left">
				<image src="https://hdsq.aoorange.cn/attachment/xcx/icon/businessDetails_icon1.png" mode="widthFix"></image>
				<text>{{ info.address }}</text>
			</view>
			<view class="right">
				<image src="https://hdsq.aoorange.cn/attachment/xcx/icon/businessDetails_icon5.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="info_line nobottom" @click="callPhone()">
			<view class="left">
				<image src="https://hdsq.aoorange.cn/attachment/xcx/icon/businessDetails_icon2.png" mode="widthFix"></image>
				<text>联系电话：{{ info.mobile }}</text>
			</view>
			<view class="right">
				<image src="https://hdsq.aoorange.cn/attachment/xcx/icon/businessDetails_icon4.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="heng"></view>
		<view class="topnav" v-if="info.isShowSign == 1">
			<view v-for="(item, index) in navigationList" :key="index" class="list" v-if="checkFun(item.val)">
				<image lazy-load="true" :src="item.cover" mode="scaleToFill" @click="triggerFun(item.val)"></image>
				<text>{{item.title}}</text>
			</view>
		</view>
		<view class="heng" v-if="info.isShowSign == 1"></view>
		<view class="info_line nobottom jt" @click="signFun(info.id, 1)" v-if="info.isShowSign == 1">
			<view class="left">
				<image src="../static/img/sign.png" mode="widthFix"></image>
				<text>打卡签到</text>
			</view>
			<view class="right">
				<text>{{info.isSign ? '已签到' : '一键签到'}}</text>
			</view>
		</view>
		<view class="heng" v-if="info.isShowSign == 1"></view>
		<view v-if="info.isCoupon == 1" class="info_line nobottom jt" @click="jump('coupon_info', info.id)">
			<view class="left">
				<image src="../static/img/coupon.png" mode="widthFix"></image>
				<text>领券中心</text>
			</view>
			<view class="right">
				<text>去领券</text>
			</view>
		</view>
		<view class="heng" v-if="info.isCoupon == 1" ></view>
		<view class="line1" v-if="productList.length > 0">
			<view class="left">
				<text class="con_state">商</text>
			</view>
			<view class="more" @click="jump('store_home', info.id)">查看更多 ></view>
		</view>
		<view class="goods" v-if="productList.length > 0">
			<view class="item" v-for="(item, index) in productList" :key="index" @click="jump('product_view', 'id='+item.id+'&merchantId='+info.id)">
				<image :src="item.picture" mode="aspectFill"></image>
				<view class="goods_name">{{item.name}}</view>
				<view class="goods_pic">
					<text>¥{{item.price}}</text>
					<text v-if="item.market_price > 0">¥{{item.market_price}}</text>
				</view>
			</view>
		</view>
		<view class="heng" v-if="productList.length > 0"></view>
		<view class="line1" v-if="couponList.length > 0">
			<view class="left">
				<text class="con_state">券</text>
			</view>
			<view class="more" @click="jump('store_coupon_list', info.id)">查看更多 ></view>
		</view>
		<view class="coupon" v-if="couponList.length > 0">
			<div class="list">
				<div class="item" v-for="(item, index) in couponList">
					<div class="left">
						<p>
							<i>￥</i>
							<b>{{item.money}}</b>
						</p>
						<!-- <p>{{item.at_least > 0 ? "买满"+item.at_least+"元" : '无金额门槛'}}</p> -->
						<label>{{item.type_name}}</label>
					</div>
					<div class="right">
						<p>{{item.title}}</p>
						<p>至{{item.end_time}}</p>
						<p>{{item.remark}}</p>
						<!-- <p>限在线支付使用</p> -->
						<label @click="reviceCoupon('now', index)">{{item.is_get == 1 ? "领取" : "已领取"}}</label>
					</div>
				</div>
			</div>
		</view>
		<view class="heng" v-if="couponList.length > 0"></view>
		<view class="line1" v-if="giftbagList.length > 0">
			<view class="left">
				<text class="con_state">推</text>
			</view>
			<view class="more" @click="jump('gift_list', info.id)">查看更多 ></view>
		</view>
		<view class="group" v-if="giftbagList.length > 0">
			<view class="item"  v-for="(item, index) in giftbagList" :key="index" @click="jump('gift_view', item.id)">
				<view class="left">
					<image :src="item.picture" mode="aspectFill"></image>
				</view>
				<view class="right">
					<view class="showTitle">{{item.title}}</view>
					<view class="showSubTitle">{{item.sub_title}}</view>
					<view class="showTime">{{item.created_at}}</view>
				</view>
			</view>
		</view>
		<view class="heng" v-if="giftbagList.length > 0"></view>
		<view class="content">
	    	<view class="title" style="width:250upx">店铺相册</view>
	    	<scroll-view class="scroll" scroll-x="true" show-scrollbar="false" style="height: 150rpx;">
	    		<view class="scroll-item" v-for="(imgItem, index2) in info.imgList" :key="index2">
	    			<image :src="imgItem.thumb"   @tap="previewImage" :data-src="imgItem.imgUrl" data-id="0" mode=""></image>
	    		</view>
	    	</scroll-view>
	    </view>
		<view class="heng"></view>
		<view class="line2 jt1">
			<view class="left">
				<text>用户评价</text>
				<text>({{ info.evaluateNum }})</text>
			</view>
			<view class="right" @click="jump('merchant_evaluate_list', info.id)">
				查看更多
			</view>
		</view>
		<view class="comment" v-for="(item,index) in evaluateList" :key="index">
			<view class="left">
				<image :src="item.head_portrait" mode="aspectFill"></image>
			</view>
			<view class="right">
				<view class="name">
					<view class="txt">
						<text>{{ item.member_name }}</text>
						<text>{{ item.create_time }}</text>
					</view>
					<view class="txt1">{{item.explain}}</view>
				</view>
				<view class="txt2">{{ item.content }}</view>
				<view class="comment_img" v-if="item.has_cover">
					<image :src="item2.thumbUrl" v-for="(item2,index2) in item.covers" mode="aspectFill" lazy-load="true"
					@tap="previewImage" :data-src="item2.imgUrl" :data-id="item.id"
					></image>
				</view>
				<view class="txt3" v-if="item.is_explain > 0">
					<text>商家回复：</text>
					<text>{{item.explain_first}}</text>
				</view>
			</view>
		</view>
		<view class="nocomment" v-if="evaluateList.length == 0">
			暂无评价～
		</view>
		<view class="bottom" :style="'height:' + bottomHeight + 'rpx;'">
			<view class="item" @click="jump('merchant_add_evaluate', info.id)">
				<image src="https://hdsq.aoorange.cn/attachment/xcx/icon/businessDetails_icon8.png" mode="widthFix"></image>
				<text>写评价</text>
			</view>
			<view class="item" @click="collectThis()">
				<image :src="info.myCollect == 1?'https://hdsq.aoorange.cn/attachment/xcx/icon/businessDetails_icon6.png':'https://hdsq.aoorange.cn/attachment/xcx/icon/businessDetails_icon7.png'" mode="widthFix"></image>
				<text>收藏</text>
			</view>
			<button class="item" open-type="share">
				<image src="https://hdsq.aoorange.cn/attachment/xcx/icon/businessDetails_icon9.png" mode="widthFix"></image>
				<text>分享</text>
			</button>
		</view>
		<uni-popup ref="popup">
			<view class="show">
				<view class="title">我的签到码</view>
				<image :src="info.signImg"></image>
				<view class="btn">
					<text @click="close()">关闭</text>
					<text @click="saveImg()" style="color: #f60">下载</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import serve from '../../static/request.js';
	import storage from '../../static/appkey.js';
	import common from '../../static/jump.js';
	import uniRate from '@/components/uni-rate/uni-rate.vue';
	export default {
		data() {
			return {
				navigationList: [
					{
						cover:'../static/img/store.png',
						title:'商城',
						val : 1,
					},
					{
						cover:'../static/img/lobbyEat.png',
						title:'堂食',
						val : 2,
					},
					{
						cover:'../static/img/takeOut.png',
						title:'外卖',
						val: 3
					},
					{
						cover:'../static/img/payOrder.png',
						title:'买单',
						val: 4
					},
				],
				dataList:[{},{}],
				welfareList:[],
				welfareCoupon:{},
				iscollect:true,
				id: 0,
				info: {
					picture: '',
					title: '',
					mobile: '',
					cate: '',
					business: '',
					address: '',
					evaluateNum: '',
					myCollect: 0,
					desc_credit: 5,
					isCoupon: 0,
					is_show_fun: 0,
				},
				imgList: [],
				productList:[],
				couponList: [],
				evaluateList: [],
				giftbagList: [],
				shareItem: {
					title: '',
					path: '',
					imageUrl: '',
				},
				isOnShow: true,
				bottomHeight: 110,
			}
		},
		components: {uniRate},
		methods: {
			checkFun(val) {
				if(val == 1) {
					return this.info.is_store == 1 ? true : false;
				}
				if(val == 2) {
					return this.info.is_lobby_eat == 1 ? true : false;
				}
				if(val == 3) {
					return this.info.is_take_out == 1 ? true : false;
				}
				if(val == 4) {
					return this.info.is_pay == 1 ? true : false;
				}
				return false;
			},
			triggerFun(val) {
				if(val == 1) {
					if(this.id == 1) {
						uni.switchTab({
						    url: '/pages/store/store'
						});
						return ;
					}
					common.jump('storeList', this.id);
				}
				if(val == 2) {
					// if(uni.getStorageSync('access-token') == '') {
					// 	common.jump('login');
					// 	return ;
					// }
					uni.navigateTo({
					    url: '/lobbyEat/desk?id='+this.id
					});
				}
				if(val == 3) {
					uni.navigateTo({
					    url: '/merchant/storeTake?id='+this.id
					});
				}
				if(val == 4) {
					this.getScancode('pay_order');
				}
				return false;
			},
			previewImage: function(e) {
				var current = e.target.dataset.src;
				var imgKey = e.target.dataset.id;
				uni.previewImage({
					current: current,
					urls: this.imgList[imgKey]
				});
				return ;
			},
			getInfo() {
				uni.showLoading({
					title: '加载中···',
					mask: true
				});
				var self = this;
				serve.request({
					url: '/marketing/merchant/view',
					data: {
						appkey: uni.getStorageSync('appkey'),
						'access-token': uni.getStorageSync('access-token'),
						'local-city':uni.getStorageSync('localCity'),
						latitude: uni.getStorageSync('latitude'),
						longitude:uni.getStorageSync('longitude'),
						id: self.id,
					}
				}).then(res => {
					console.log(res);
					if(res.code != 200) {
						uni.showToast({
							title: res.message,
							icon : 'none',
							success:function(){ 
								setTimeout(function () { 
									common.jump('store_list')
								}, 2000) 
							} 
						});
						return;
					}
					self.info = res.data;
					if(self.info.imgList.length > 0) {
						self.imgList[0] = [];
						self.info.imgList.forEach((imgItem, imgKey) => {
							self.imgList[0][imgKey] = imgItem.imgUrl;
						});
					}					
				});
			},
			getProductList() {
				var self = this;
				serve
					.request({
						url: '/product/product/index',
						data: {
							appkey: uni.getStorageSync('appkey'),
							'access-token': uni.getStorageSync('access-token'),
							merchantId: self.id,
							type: 1,
							pageSize : 6
						}
					})
					.then(res => {
						self.productList = res.data;
						self.$forceUpdate();
					});
			},
			callPhone() {
				uni.makePhoneCall({
				    phoneNumber: this.info.mobile
				});
			},
			getCouponList(){
				var self = this;
				serve
					.request({
						url: '/marketing/coupon-type/index',
						data: {
							appkey: uni.getStorageSync('appkey'),
							'access-token': uni.getStorageSync('access-token'),
							merchantId: self.id,
						}
					})
					.then(res => {
						self.couponList = res.data;
						self.$forceUpdate();
					});
			},
			getGiftbagList() {
				var self = this;
				console.info('that --- ');
				serve.request({
					url: '/marketing/gift-bag/list',
					data: {
						appkey: uni.getStorageSync('appkey'),
						'access-token': uni.getStorageSync('access-token'),
						merchantId: self.id,
						pageSize: 5
					}
				}).then(res => {
				console.info('that +++ ');
					self.giftbagList = res.data;
					self.$forceUpdate();
				});
			},
			getEvaluateList(){
				var self = this;
				serve
					.request({
						url: '/marketing/evaluate/index',
						data: {
							appkey: uni.getStorageSync('appkey'),
							'access-token': uni.getStorageSync('access-token'),
							merchantId: self.id,
							page: 1,
						}
					})
					.then(res => {
						self.evaluateList = res.data;
						self.evaluateList.forEach((item, index) => {
							if(item.covers.length > 0) {
								self.imgList[item.id] = [];
								item.covers.forEach((imgItem, imgKey) => {
									self.imgList[item.id][imgKey] = imgItem.imgUrl;
								});
							}
						});
						self.$forceUpdate();
					});
			},
			getWelfareList(){
				var self = this;
				serve
					.request({
						url: '/marketing/merchant/welfare',
						data: {
							appkey: uni.getStorageSync('appkey'),
							'access-token': uni.getStorageSync('access-token'),
							cateId: self.info.cateId,
							page: 1,
						}
					})
					.then(res => {
						if (res.data && res.data.length > 0) {
							self.welfareList = res.data;
							self.$forceUpdate();
						}
					});
					
			},
			getShareItem(){
				var self = this;
				serve.request({
					url: '/share/index',
					data: {
						appkey: uni.getStorageSync('appkey'),
						'access-token': uni.getStorageSync('access-token'),
						type: 'merchant',
						id: self.id,
					}
				})
				.then(res => {
					self.shareItem.title = res.data.title;
					self.shareItem.path = res.data.path;
					self.shareItem.imageUrl = res.data.imageUrl;
				});
			},
			collectThis(){
				if(uni.getStorageSync('access-token') == '') {
					this.jump('login');
					return ;
				}
				uni.showLoading({
					title: '操作中···',
					mask: true
				});
				serve
					.request({
						url: '/common/collect/operate',
						data: {
							appkey: uni.getStorageSync('appkey'),
							'access-token': uni.getStorageSync('access-token'),
							type: 'merchant',
							id : this.id
						}
					})
					.then(res => {
						uni.showToast({
							title: res.message,
							icon : 'none'
						});
						if(res.code == 200) {
							this.info.myCollect = this.info.myCollect == 1 ? 0 : 1;
						}
						uni.hideLoading();
					});
			},
			showMap() {
				uni.openLocation({
				    latitude: Number(this.info.latitude),
				    longitude: Number(this.info.longitude),
				    success: function (res) {
				        console.log(res);
				    }
				});
			},
			reviceCoupon(type, index, index2) {
				if(uni.getStorageSync('access-token') == '') {
					common.jump('login');
					return ;
				}
				var self = this;
				var couponItem;
				let merchantId;
				if(type == 'now') {
					couponItem = self.couponList[index];
					if(!couponItem || couponItem.is_get == 0) {
						return ;
					}
					merchantId = self.id;
				} else {
					var merchantInfo = self.welfareList[index];
					console.info(merchantInfo);
					couponItem = merchantInfo.coupon[index2];
					if(!couponItem || couponItem.is_get == 0) {
						return ;
					}
					merchantId = merchantInfo.id;
				}
				serve
					.request({
						url: '/marketing/coupon-type/create',
						data: {
							appkey: uni.getStorageSync('appkey'),
							'access-token': uni.getStorageSync('access-token'),
							id : couponItem.id,
							merchantId: merchantId
						}
					})
					.then(res => {
						uni.showToast({
							title: res.message,
							icon : 'none'
						});
						if(res.code == 200) {
							if(type == 'now') {
								self.$set(self.couponList[index], 'is_get', 0);
								self.$set(self.couponList[index], 'myGet', 1);
							} else {
								self.$set(self.welfareList[index].coupon[index2], 'is_get', 0);
								self.$set(self.welfareList[index].coupon[index2], 'myGet', 1);
							}
						}
					});
			},
			getScancode(scantype = 'sign') {
				// if(uni.getStorageSync('access-token') == '') {
				// 	common.jump('login');
				// 	return ;
				// }
				// if(scantype == 'sign') {
				// 	if(this.info.isSign == 1) {
				// 		this.$refs.popup.open();
				// 		return ;
				// 	}
				// }
				var self = this;
				wx.scanCode({
					success: (res) => {
						uni.navigateTo({
							url: '/pages/common/scancode?q='+encodeURIComponent(res.result)
						});
						return ;
						var paramStr = res.result.replace('https://hdsq.aoorange.cn/qrcode?', ""); 
						var paramArr = paramStr.split('=');
						if(paramArr[0] == 'payorder'){
							let pay_code = paramArr[1];
							uni.navigateTo({
							    url: '/merchant/payOrder?payCode='+pay_code
							});
						} else if (paramArr[0] == 'sign') {
							self.signFun(paramArr[1], 1);
						} else if (paramArr[0] == 'recommendSign') {
							self.signFun(paramArr[1], 2);
						} else if (paramArr[0] == 'desk') {
							uni.navigateTo({
							    url: '/merchant/lobby?id='+paramArr[1]
							});
						} else if (paramArr[0] == 'desk') {
							uni.navigateTo({
							    url: '/merchant/lobby?id='+paramArr[1]
							});
						} else if (paramArr[0] == 'recharge') {
							uni.redirectTo({
							    url: '/pages/my/recharge?payCode='+paramArr[1]
							});
						} else if (paramArr[0] == 'invitation') {
							uni.redirectTo({
							    url: '/pages/my/inviteRegister?recommend_mobile='+paramArr[1]
							});
						} else if (paramArr[0] == 'business') {
                            let bArr = paramArr[1].split('-');
                            console.info(bArr);
							uni.redirectTo({
							    url: '/merchant/apply?type='+bArr[0]+'&bid='+bArr[1]
							});
						} else if (paramArr[0] == 'spread') {
							uni.redirectTo({
							    url: '/business/spread_agreement?recommend_mobile='+paramArr[1]
							});
						} else if (paramArr[0] == 'shop') {
							uni.setStorageSync('param_filter', ''); 
							uni.setStorageSync('param_filter', 'merchantId='+paramArr[1]); 
							console.info(paramArr[1]);
							uni.switchTab({
								url: '/pages/store/store'
							})
						} else {
							uni.showToast({
								title: '未标识的二维码',
								icon : 'none'
							});
						}
					},
				})
			},
			signFun(itemId, type) {
                if(uni.getStorageSync('access-token') == '') {
                    common.jump('login');
                    return ;
                }
				var self = this;
                if(self.info.isSign == 1) {
                    self.$refs.popup.open();
                    return ;
                }
				serve.request({
					url: '/member/sign/create',
					data: {
						appkey: uni.getStorageSync('appkey'),
						'access-token': uni.getStorageSync('access-token'),
						itemId : itemId,
						type: type
					}
				}).then(res => {
					uni.showToast({
						title: res.message,
						icon : 'none'
					});
					if(res.code == 200) {
						self.getInfo();
					}
				});
			},
			close(){
				this.$refs.popup.close()
			},
			saveImg() {
				let that = this;
				uni.getSetting({
					 success: (res)=>{
						 console.log(res)
						 if (!res.authSetting["scope.writePhotosAlbum"]){
							 uni.showModal({
								 title: '警告',
								 content: '检测到您没您未授权相册权限,点击确定获取授权。',
								 success: function (res) {
									if (res.confirm) {
									  uni.authorize({
											scope: 'scope.writePhotosAlbum',
											success() {
												that.saveImgToAlbum();
											},
											fail(err){
												console.log('用户拒绝授权相册') 
											}
										})		 
									}
								 }
							 })
						 }else{
							 that.saveImgToAlbum();
						 }
					 },
					 fail: () => {
						console.log('点击了拒绝')
					 }
				})
			},
			saveImgToAlbum() {
				let imgData = this.info.signImg.replace('data:image/png;base64,', ""); 
				console.info(imgData);
				let fileName = new Date().getTime();
				var fileManager = uni.getFileSystemManager();
				fileManager.writeFile({
					filePath: wx.env.USER_DATA_PATH+'/'+fileName+'.png', // 指定图片的临时路径
					data: imgData, // 要写入的文本或二进制数据
					encoding: 'base64', // 指定写入文件的字符编码
					success: res => {
						console.log('写入文件成功', res)
						console.log(wx.env.USER_DATA_PATH + '/'+fileName+'.png')
						uni.saveImageToPhotosAlbum({ // 保存图片到相册
						  filePath: wx.env.USER_DATA_PATH + '/'+fileName+'.png',
						  success: function (res) {
							  console.log('保存成功', res)
								uni.showToast({
								  title: '保存成功',
								})
						  },
						  fail: function (err) {
							  console.log('保存失败', err)
						  }
						})
					},
					file: err => {
						console.log('写入文件失败', err)
					}
				})
			},
			jump(jump_type, jump_link){
				common.jump(jump_type, jump_link);
			}
		},
		onLoad(options) {
			if(uni.getSystemInfoSync().safeAreaInsets.top > 20){
				this.bottomHeight = 150;
			}
			this.id = options.id || 0;
			let parentKey = options.parentKey || '';
			uni.setStorageSync('parentKey', parentKey);
			if(this.id == 0) {
				uni.showToast({
					title: "错误的访问方式",
					icon : 'none',
					success:function(){ 
						setTimeout(function () { 
							common.jump('return_one')
						}, 2000) 
					} 
				});
				return;
			}
			this.getInfo();
			this.getShareItem();
			this.getGiftbagList();
		},
		onShow() {
			if(this.isOnShow) {
				this.getEvaluateList();
			}
			this.isOnShow = false;
		},
		onPullDownRefresh() {
			console.log('refresh');
			this.getInfo();
			this.getEvaluateList();
			this.getGiftbagList();
		},
		onShareAppMessage(res) {
			console.info(this.shareItem);
			return this.shareItem;
		},
	}
</script>

<style scoped lang="scss">
	.BusinessDetails {
		padding-bottom: 100upx;
		.info {
			box-sizing: border-box;
			padding: 40upx 30upx 0upx 30upx;
			display: flex;
			align-items: center;
			

			image {
				width: 220upx;
				height: 180upx;
			}

			.right {
				margin-left: 15upx;

				.right_txt {
					display: flex;
					align-items: center;
					padding-bottom: 30upx;

					text:nth-child(1) {
						color: #333333;
						font-size: 32upx;
						// max-width: 213upx;
						margin-right: 19upx;
					}

					.state {
						height: 32upx;
						line-height: 32upx;
						padding: 4upx 8upx;
						text-align: center;
						color: #FFFFFF;
						font-size: 20upx;
						border-radius: 2upx;
						margin-left: 10upx;
					}
				}

				.info_title {
					font-size: 24upx;
					color: #999999;
					margin-top: 30upx;
					width: 496rpx;
				}
				.info_or{
					display: flex;
					justify-content: space-between;
					.time{
						font-size: 24upx;
						color: #999999;
					}
					.km{
						font-size: 24upx;
						color: #999999;
					}
				}
			}
		}

		.nobottom {
			border-bottom: none !important;
		}

		.info_line {
			position: relative;
			height: 100upx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-left: 30upx;
			border-bottom: 1upx rgba(57, 72, 107, 0.1) solid;

			.left {
				display: flex;
				align-items: center;
				height: 100%;
				color: #999999;
				font-size: 24upx;

				image {
					width: 28upx;
					height: 28upx;
					margin-right: 7upx;
				}
			}

			.right {
				padding-right: 30upx;
				color: #999999;
				font-size: 24upx;

				image {
					width: 32upx;
					height: 32upx;
				}

				text {
					color: #666666;
					font-size: 28upx;
					padding-right: 23upx;
				}
			}
		}

		.heng {
			width: 100%;
			height: 20upx;
			background: #F7F7F7;
		}

		.jt::after {
			position: absolute;
			right: 33upx;
			top: 50upx;
			content: '';
			border: 1upx solid rgba(57, 72, 107, 0.5);
			border-width: 0 3upx 3upx 0;
			padding: 6upx;
			transform: rotate(-45deg);
			-webkit-transform: rotate(-45deg);
		}

		.jt1::after {
			position: absolute;
			right: 33upx;
			bottom: 8upx;
			content: '';
			border: 1upx solid rgba(57, 72, 107, 0.5);
			border-width: 0 3upx 3upx 0;
			padding: 6upx;
			transform: rotate(-45deg);
			-webkit-transform: rotate(-45deg);
		}

		.line {
			position: relative;
			height: 120upx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32upx;
			color: #333333;
			border-bottom: 1upx #EBECF0 solid;

			image {
				width: 35upx;
				height: 35upx;
				margin-right: 16upx;
			}

			.line_state {
				position: absolute;
				width: 96upx;
				height: 36upx;
				line-height: 36upx;
				color: #FFFFFF;
				font-size: 24upx;
				text-align: center;
				background: rgba(235, 89, 56, 1);
				border-radius: 18upx;
				left: 450upx;
				top: 45upx;
			}
		}

		.line1 {
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
			padding: 0upx 30upx;
			height: 100upx;

			.left {
				display: flex;
				align-items: center;
				color: #333333;
				font-size: 32upx;
			}

			.right {
				width: 140upx;
				height: 60upx;
				text-align: center;
				line-height: 60upx;
				color: #FFFFFF;
				font-size: 28upx;
				background: rgba(235, 89, 56, 1);
				border-radius: 30upx;
			}

			.more {
				font-size: 28upx;
				color: #999999;
			}
		}

		.con_state {
			background: rgba(235, 89, 56, 1);
			border-radius: 2upx;
			color: #FFFFFF;
			font-size: 20upx;
			padding: 2upx 4upx;
			margin-right: 20upx;
		}

		.goods {
			box-sizing: border-box;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			padding: 0upx 30upx 22upx;

			.item {
				padding-bottom: 30upx;

				image {
					width: 330upx;
					height: 340upx;
				}

				.goods_name {
					font-size: 32upx;
					color: #333333;
					margin-top: 30upx;
				}

				.goods_pic {
					text:nth-child(1) {
						color: #FF5F60;
						font-size: 32upx;
					}

					text:nth-child(2) {
						color: #CCCCCC;
						font-size: 24upx;
						text-decoration: line-through;
						margin-left: 12upx;
					}
				}
			}
		}

		.coupon {
			.list {
				padding: 0upx 30upx;

				.item {
					width: 690upx;
					height: 210upx;
					background: url(https://hdsq.aoorange.cn/attachment/xcx/icon/businessDetails_bg.png);
					background-size: 100% auto;
					display: flex;
					align-items: center;
					position: relative;
					margin-bottom: 48upx;

					p,
					label {
						display: block;
					}

					.left {
						text-align: center;
						color: #fff;
						width: 226upx;
						height: 210upx;
						font-size: 20upx;

						p {
							&:nth-child(1) {
								margin-top: 40upx;

								b {
									font-size: 60upx;
								}
							}
						}

						label {
							width: 100upx;
							height: 30upx;
							// background: rgba(255, 255, 255, 0.2);
							border-radius: 15upx;
							margin: 5upx auto;
						}
					}

					.right {
						flex: 1;
						margin-left: 10upx;

						p {
							color: #999999;

							&:nth-child(1) {
								color: #333333;
								font-size: 28upx;
							}

							&:nth-child(2) {
								font-size: 24upx;
								margin-top: 34upx;
							}

							&:nth-child(3) {
								font-size: 20upx;
							}

							&:nth-child(4) {
								font-size: 20upx;
							}
						}

						.red {
							color: #EB5938;
						}

						label {
							position: absolute;
							top: 50%;
							right: 30upx;
							transform: translateY(-50%);
							width: 140upx;
							height: 48upx;
							line-height: 48upx;
							text-align: center;
							background: #EB5938;
							border-radius: 24upx;
							color: #fff;
							font-size: 24upx;
						}
					}
				}

			}


		}

		.group {
			margin-top: -30upx;

			.item {
				box-sizing: border-box;
				padding: 30upx;
				border-bottom: 1upx #EBECF0 solid;
				position: relative;
				display: flex;

				.group_bot {
					position: absolute;
					right: 30upx;
					top: 95upx;
					width: 140upx;
					height: 48upx;
					line-height: 48upx;
					text-align: center;
					color: #FFFFFF;
					font-size: 24upx;
					background: rgba(235, 89, 56, 1);
					border-radius: 24upx;
				}

				.left {
					position: relative;
					height: 170upx;

					image {
						width: 170upx;
						height: 170upx;
					}

					.item_state {
						position: absolute;
						bottom: 0;
						width: 170upx;
						height: 36upx;
						line-height: 36upx;
						text-align: center;
						background: rgba(235, 89, 56, 0.7);
						color: #FFFFFF;
						font-size: 24upx;
					}
				}

				.right {
					margin-left: 20upx;
					height: 170upx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					
					.showTitle{
						font-size: 32rpx;
						color: #333333;
						font-weight: bold;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						width: 480rpx;
					}
					
					.showSubTitle{
					   font-size: 28rpx;
					   color: #333333;
					   -webkit-line-clamp: 2;
					   overflow: hidden;
					   word-break: break-all;
					   text-overflow: ellipsis;
					   display: -webkit-box;
					   -webkit-box-orient: vertical;
					}
					
					.showTime{
						    display: flex;
						    flex-direction: column;
						    font-size: 24rpx;
						    color: #aaa;
					}
					
					
					.name {
						font-size: 32upx;
						color: #333333;
						font-weight: bold;
					}

					.rule {
						font-size: 28upx;
						color: #333333;
					}
					
					.pic {
						display: flex;
						flex-direction: column;

						text:nth-child(1) {
							font-size: 28upx;
							color: #EB5938;
							font-weight: bold;
						}

						text:nth-child(2) {
							font-size: 24upx;
							color: #CCCCCC;
							text-decoration: line-through;
						}
					}
				}
			}
		}

		.line2 {
			position: relative;
			box-sizing: border-box;
			padding: 33upx 30upx 0upx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left {
				font-size: 24upx;
				color: #333333;

				text:last-child {
					font-weight: bold;
				}
			}

			.right {
				color: #999999;
				font-size: 24upx;
				padding-right: 20upx;
			}
		}
		

		.comment {
			display: flex;
			box-sizing: border-box;
			padding: 50upx 30upx;
			border-bottom: 1upx #EBECF0 solid;

			.left {
				image {
					width: 60upx;
					height: 60upx;
					border-radius: 50%;
				}
			}

			.right {
				margin-left: 13upx;
				width: 617upx;

				.name {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.txt {
						display: flex;
						align-items: center;

						text:nth-child(1) {
							font-size: 28upx;
							font-weight: bold;
							color: #333333;
						}

						text:nth-child(2) {
							color: #999999;
							font-size: 20upx;
							margin-left: 25upx;
						}
					}

					.txt1 {
						color: #EB5938;
						font-size: 28upx;
					}
				}

				.txt2 {
					font-size: 28upx;
					color: #666666;
					margin-top: 30upx;
				}

				.comment_img {
					display: flex;

					image:first-child {
						margin-left: 0;
					}

					image {
						width: 190upx;
						height: 168upx;
						margin-top: 30upx;
						margin-left: 22upx;
					}
				}

				.txt3 {
					margin-top: 30upx;
					width: 614upx;
					box-sizing: border-box;
					background: rgba(240, 240, 240, 1);
					padding: 23upx 20upx 29upx;
					font-size: 28upx;
					color: #999999;

					text:first-child {
						font-weight: bold;
					}
				}
			}
		}
		.nocomment {
			font-size: 28upx;
			color: rgba(60, 72, 104, 0.5);
			width: 100%;
			padding: 87upx 0upx;
			text-align: center;
		}

		.welfare {
			border-bottom: 1upx #EBECF0 solid;
			
			.top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;
				padding: 40upx 30upx 0upx;

				.rigth {
					display: flex;
					align-items: center;
					font-size: 28upx;
					font-weight: bold;
					color: #333333;

					image {
						width: 60upx;
						height: 60upx;
						margin-right: 13upx;
					}
				}

				.left {
					width: 100upx;
					height: 48upx;
					line-height: 48upx;
					border: 1upx solid rgba(235, 89, 56, 1);
					border-radius: 24upx;
					color: #EB5938;
					font-size: 24upx;
					text-align: center;
				}
			}

			.list {
				margin-top: 36upx;
				padding: 0upx 30upx;
				.item {
					width: 690upx;
					height: 210upx;
					background: url(https://hdsq.aoorange.cn/attachment/xcx/icon/businessDetails_bg.png);
					background-size: 100% auto;
					display: flex;
					align-items: center;
					position: relative;
					margin-bottom: 36upx;

					p,
					label {
						display: block;
					}

					.left {
						text-align: center;
						color: #fff;
						width: 226upx;
						height: 210upx;
						font-size: 20upx;

						p {
							&:nth-child(1) {
								margin-top: 40upx;

								b {
									font-size: 60upx;
								}
							}
						}

						label {
							width: 100upx;
							height: 30upx;
							// background: rgba(255, 255, 255, 0.2);
							border-radius: 15upx;
							margin: 5upx auto;
						}
					}

					.right {
						flex: 1;
						margin-left: 10upx;

						p {
							color: #999999;

							&:nth-child(1) {
								color: #333333;
								font-size: 28upx;
							}

							&:nth-child(2) {
								font-size: 24upx;
								margin-top: 34upx;
							}

							&:nth-child(3) {
								font-size: 20upx;
							}

							&:nth-child(4) {
								font-size: 20upx;
							}
						}

						.red {
							color: #EB5938;
						}

						label {
							position: absolute;
							top: 50%;
							right: 30upx;
							transform: translateY(-50%);
							width: 140upx;
							height: 48upx;
							line-height: 48upx;
							text-align: center;
							background: #EB5938;
							border-radius: 24upx;
							color: #fff;
							font-size: 24upx;
						}
					}
				}

			}

		}
		.topnav {
			display: flex;
			box-sizing: border-box;
			padding-bottom: 58upx; 
			flex-wrap: wrap;
			width: 100%;
		
			.list {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 25%;
				padding-top: 64upx;
				color: #23345B;
				font-size: 24upx;
		
				image {
					width: 98upx;
					height: 97upx;
					// border-radius: 50%;
					margin-bottom: 20upx;
				}
			}
		}
		
		.content {
			position: relative;
			box-sizing: border-box;
			width: 100%;
			padding: 36upx 30upx 0upx 30upx;
			border-bottom: 16upx rgba(251, 251, 253, 0.8) solid;
		
			.title {
				position: relative;
				width: 130upx;
				font-size: 24upx;
				height: 24upx;
				line-height: 24upx;
				float: left;
			}
		
			::-webkit-scrollbar {
				display: none;
			}
		
			.scroll {
				padding-top: 60upx;
				width: 95%;
				padding: 60upx 16upx 45upx;
				white-space: nowrap;
		
				.scroll-item:first-child {
					margin-left: 0upx;
				}
		
				.scroll-item {
					display: inline-flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					margin-left: 40upx;
					font-size: 20upx;
		
					image {
						width: 140upx;
						height: 140upx;
						border-radius: 10upx;
					}
		
					text {
						padding-top: 26upx;
					}
				}
			}
		}
	    .bottom{
			position: fixed;
			width: 100%;
			height: 100upx;
			background: #FFFFFF;
			z-index: 10;
			bottom: 0;
			display: flex;
			justify-content: space-around;
			align-items: center;
			.item{
				display: flex;
				align-items: center;
				flex-direction: column;
				image{
					width:38upx;
					height:38upx;
				}
				text{
					font-size: 20upx;
					color: #999999;
					margin-top: 8upx;
				}
			}
			.item::after{
				border: none;
			}
			button {
				margin-left: 0;
				margin-right: 0;
				padding-left: 0;
				padding-right: 0;
				background-color: #fff;
				line-height: normal;
			}
		}
		.show{
			// width: 400upx;
			background: #FFFFFF;
			border-radius: 20upx;
			.title{
				text-align: center;
				font-size: 32upx;
				height: 80upx;
				line-height: 80upx;
				border-bottom: 1upx rgba(60, 72, 104, 0.05) solid;
			}
			image{
				height: 520upx;
			}
			.btn{
				font-size: 28upx;
				padding: 0upx 90upx 20upx;
				display: flex;
				justify-content: space-between;
			}
		}
	}
	.info-desc{
		padding: 40rpx 20rpx;
		border-bottom: 1upx #F2F2F2 solid;
		font-size: 24upx;
		color: #999999;
	}
</style>
